<template>
  <div :class="{'insNav':is_ins_nav}" class="nav">
    <div class="pcNavBg">
      <div class="Le">
        <div @click="tz('/')" class="logo">
          <img v-show="!is_ins_nav" src="@/assets/img/logo.svg" alt="">
          <img v-show="is_ins_nav" src="@/assets/img/ins_logo.svg" alt="">
        </div>
        <div class="navMainBg">
          <ul>
            <li :class="{'acPcNavLi':isPcNavStr==r_It.path}" v-for="(r_It,r_Idx) in r_arr" :key="'r_It_0'+r_Idx" @click="tz(r_It.path)"><span>{{r_It.txt}}</span></li>
          </ul>
        </div>
      </div>
      <div class="Ri">

        <!-- <div class="qqLogin">
          <img src="@/assets/img/account/qqLogin.png" alt="">
        </div> -->

        <div v-show="!myInfo.is_loginEd" @click="showAccountPop" class="log_reg">
          <span>登录</span>&nbsp;/&nbsp;<span>注册</span>
        </div>
        <ul v-show="myInfo.is_loginEd" class="loginEd">

          <li>
            <div @click="tz('/u_center/u_manage')" class="u_info">
              <img :src="myInfo.avatar">
              <span>
                {{myInfo.nickname}}
              </span>
            </div>
          </li>
        <!--  <li>
            <span @click="tz('/u_center/u_manage')">
              会员中心
            </span>
          </li> -->
        </ul>
      </div>
    </div>

    <div class="mbNavBg">
      <div class="mbNav">
        <div @click="tz('/')" class="logo">
          <img src="@/assets/img/ins_logo.svg" alt="">
        </div>
        <div @click="mbNavBtnFn" class="mb_btn">
          <img v-show="!is_ShowMbNav" src="../assets/img/mb/closeMenu.png" >
          <img v-show="is_ShowMbNav" src="../assets/img/mb/openMenu.png" >
        </div>
      </div>

      <div v-show="is_ShowMbNav" class="mbNavBotBg">
      	<ul>
              <li @click="mb_tzFn(mb_btnIt.path)" :class="{'mbNavAc':R_path==mb_btnIt.path}" v-for="(mb_btnIt,mb_btnIdx) in btnTagArr" :key="'mb_btnIt_0'+mb_btnIdx"><span>{{mb_btnIt.name}}</span></li>
      	</ul>

      	<dl class="mb_uInfo">
          <div v-show="!myInfo.is_loginEd" @click="showAccountPop" class="log_reg">
            <span>登录</span>&nbsp;/&nbsp;<span>注册</span>
          </div>
          
      		 <dt v-show="myInfo.is_loginEd" @click="tz('/u_center/u_manage')">
             <div class="tu">
                 <img :src="myInfo.avatar" >
               </div>
               <span>
                 {{dotNickFn(myInfo.nickname)}}
               </span>

           </dt>
      		 <!-- <dd>
             <span @click="loginOut">
               退出登录
             </span>
           </dd> -->
      	</dl>
        
        
        
      </div>

    </div>


  </div>
</template>

<script>
  export default{
    data(){
      return{
        btnTagArr:[
            {
              name:"写作工作台",
              path:"/write"
            },
            {
              name:"热点发现",
              path:"/hot"
            },
            {
              name:"工具箱",
              path:"/magicBox"
            },
            {
              name:"会员特区",
              path:"/purchase"
            }
          ],
          R_path:"",

        is_ShowMbNav:false,
        is_ins_nav:false,
        isPcNavStr:"",
        r_arr:[
          {
            txt:"写作工作台",
            path:"/write"
          },
          {
            txt:"热点发现",
            path:"/hot"
          },
          {
            txt:"工具箱",
            path:"/magicBox"
          },
          {
            txt:"会员特区",
            path:"/purchase"
          }
        ],

      }
    },
    watch:{
      $route:{
          //https://blog.csdn.net/qq_40323256/article/details/101907326
      		handler:function(newVal,oldVal){
            this.isPcNavStr=newVal.path;
            this.R_path=newVal.path;
            if(newVal.path!=="/"){
              this.is_ins_nav=true;
            }else{
              this.is_ins_nav=false;
            }
      		},
      		deep:true,
            immediate:true
      },
      "$store.state.userInfo":{
        handler:function(newVal,oldVal){
          console.log("新用户信息：",newVal);
          this.myInfo=newVal;
        },
        deep:true,
        immediate:true
      }
    },
    computed:{
      dotNickFn(val){
        return (val)=>{
          if(val.length>=12){
            return val.slice(0,12)+"***";
          }else{
            return val.slice(0,12);
          }

        }
      }
    },

    created() {
      let that=this;

    },
    mounted() {
      let that=this;
      that.getU_Info();
    },
    methods:{
      mbNavBtnFn(){
        let that=this;
        that.is_ShowMbNav=!that.is_ShowMbNav;
      },
      mb_tzFn(val){
        let that=this;
        that.tz(val);
        that.is_ShowMbNav=false;
      },
      loginOut(){
        let that=this;
        this.$request.post(
          "/user/logout",
          {

          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        )
        .then(res=>{
          console.log("退出登录请求成功：",res);
          if(res.data.code==200){
            window.localStorage.removeItem("u_Token");
            window.localStorage.removeItem("u_Info");

            that.myInfo={
                          avatar: "http://user.miyun.info/static/images/avatar.png",
                          balance: "0.00",
                          coin: 0,
                          id: 13,
                          is_email: 0,
                          is_loginEd: true,
                          is_mobile: 0,
                          is_password: 0,
                          level: 0,
                          mobile: "15245684561",
                          nickname: "一顿胖三斤",
                          platform: 3,
                          score: 0,
                          total_amount: "0.00",
                          username: "一顿胖三斤",
                          is_loginEd:false
                        };
              this.$store.commit("updateU_Info",that.myInfo);

              this.$bus.$emit("toastEvent",res.data.msg,()=>{
                this.tz("/");
                this.$bus.$emit("tcAccountPopEvent",true);
              });

          }

        })
         .catch((err)=>{
         	console.log("退出登录请求失败：",err);
         });
      },


      showAccountPop(){
        let that=this;
        this.$bus.$emit("tcAccountPopEvent",true);
      }

    }
  }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/nav.less";
  .qqLogin{
    height: 30px;
    margin-right: 10px;
    img{
      height: 100%;
      display: block;
      cursor: pointer;
    }
  }
</style>
